<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <div class="welcome-text">
          <h2>欢迎使用</h2>
          <h1>票游假期系统</h1>
          <p>一站式旅游票务管理平台</p>
        </div>
      </div>
      <div class="login-right">
        <div class="login-form">
          <div class="form-header">
            <h2>用户注册</h2>
            <p>请输入您的注册信息</p>
          </div>
          <el-form :model="user" ref="registerForm">
            <el-form-item>
              <el-input
                  v-model="user.username"
                  placeholder="请输入用户名"
                  :prefix-icon="User"
                  maxlength="16"
                  size="large"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                  v-model="user.password"
                  placeholder="请输入密码"
                  show-password
                  :prefix-icon="Lock"
                  maxlength="16"
                  size="large">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                  v-model="user.realName"
                  placeholder="请输入真实姓名"
                  :prefix-icon="User"
                  maxlength="16"
                  size="large"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                  v-model="user.idCard"
                  placeholder="请输入身份证号"
                  :prefix-icon="Key"
                  maxlength="18"
                  size="large"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                  v-model="user.sex"
                  placeholder="请选择性别"
                  size="large"
                  style="width: 100%">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                  v-model="user.phone"
                  placeholder="请输入手机号"
                  :prefix-icon="User"
                  maxlength="11"
                  size="large"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                  v-model="user.email"
                  placeholder="请输入邮箱"
                  :prefix-icon="User"
                  maxlength="50"
                  size="large"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="captcha-container">
                <el-input
                    v-model="user.captcha"
                    placeholder="验证码"
                    :prefix-icon="Key"
                    maxlength="5"
                    size="large"
                    class="captcha-input">
                </el-input>
                <img
                    :src="captcha"
                    class="captcha-image"
                    @click="loadCaptcha"
                    title="点击刷新验证码">
              </div>
            </el-form-item>
            <el-form-item>
              <div class="button-group">
                <el-button
                    class="login-button"
                    type="primary"
                    size="large"
                    @click="onSubmit"
                    :loading="registerLoading">
                  {{ registerLoading ? '注册中...' : '注册' }}
                </el-button>
                <el-button
                    class="register-button"
                    type="success"
                    size="large"
                    @click="onLogin">
                  返回登录
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import registerApi from '../api/registerApi.js'
import loginApi from '../api/loginApi.js'
import { User, Lock, Key } from '@element-plus/icons-vue'

const user = ref({
  username: '',
  password: '',
  realName: '',
  idCard: '',
  sex: '',
  phone: '',
  email: '',
  captcha: '',
  key: ''
});

const registerLoading = ref(false);

onMounted(function(){
  //测试用，删除token
  localStorage.removeItem("token");
  // 加载验证码
  loadCaptcha();
})

// 获取路由对象
const router = useRouter();
// 验证码图片数据
const captcha = ref("");

//注册操作
const onSubmit = async () => {
  if (!user.value.username) {
    ElMessage.warning('请输入用户名');
    return;
  }
  if (!user.value.password) {
    ElMessage.warning('请输入密码');
    return;
  }
  if (!user.value.realName) {
    ElMessage.warning('请输入真实姓名');
    return;
  }
  if (!user.value.idCard) {
    ElMessage.warning('请输入身份证号');
    return;
  }
  if (!user.value.sex) {
    ElMessage.warning('请选择性别');
    return;
  }
  if (!user.value.phone) {
    ElMessage.warning('请输入手机号');
    return;
  }
  if (!user.value.email) {
    ElMessage.warning('请输入邮箱');
    return;
  }
  if (!user.value.captcha) {
    ElMessage.warning('请输入验证码');
    return;
  }

  registerLoading.value = true;
  try {
    console.log("传参----"+user.value)
    const res = await registerApi.register(user.value);
    console.log("返回结果----"+res)
    if (res) {
      ElMessage.success('注册成功');
      // localStorage.setItem("token", res);
      // router.push("/");
      router.push('/login');
    }
  } catch (error) {
    await loadCaptcha(); // 注册失败刷新验证码
    console.log("失败"+error);
  } finally {
    registerLoading.value = false;
  }
}

// 返回登录按钮点击事件
const onLogin = () => {
  router.push('/login');
}

// 加载验证码
const loadCaptcha=async ()=>{
  const res=await loginApi.captcha();
  user.value.key=res.key;
  captcha.value=res.base;
}

</script>

<style scoped>
.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.login-container::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(30deg);
}

.login-box {
  display: flex;
  width: 900px;
  height: 700px; /* 增加高度以适应更多表单字段 */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  backdrop-filter: blur(10px);
  z-index: 1;
}

.login-left {
  flex: 1;
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 40px;
}

.welcome-text h2 {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 300;
}

.welcome-text h1 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 700;
}

.welcome-text p {
  font-size: 18px;
  opacity: 0.9;
}

.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* 减少padding */
}

.login-form {
  width: 100%;
  max-width: 350px;
}

.form-header {
  text-align: center;
  margin-bottom: 20px; /* 减少间距 */
}

.form-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 600;
}

.form-header p {
  color: #666;
  font-size: 14px;
}

.captcha-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-input {
  flex: 1;
}

.captcha-image {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.captcha-image:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  gap: 15px;
  width: 100%;
}

.login-button,
.register-button {
  flex: 1;
  height: 45px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  border: none;
  transition: all 0.3s;
}

.login-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.register-button {
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
}

.login-button:hover,
.register-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409eff inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px #409eff inset;
}

@media (max-width: 768px) {
  .login-box {
    width: 90%;
    flex-direction: column;
    height: auto;
  }

  .login-left {
    padding: 20px;
  }

  .login-right {
    padding: 30px 20px;
  }

  .button-group {
    flex-direction: column;
  }
}
</style>
